<!-- 使用自定义时间格式化的示例 -->
<template>
  <div class="space-y-4">
    <!-- 使用默认中文格式化 -->
    <CommentItem :comment="comment" />

    <!-- 使用英文格式化 -->
    <CommentItem :comment="comment" :custom-format-time="TIME_FORMATTERS.english" />

    <!-- 使用完整日期时间格式化 -->
    <CommentItem :comment="comment" :custom-format-time="TIME_FORMATTERS.full" />

    <!-- 使用自定义格式 -->
    <CommentItem
      :comment="comment"
      :custom-format-time="TIME_FORMATTERS.custom('YYYY-MM-DD HH:mm')"
    />

    <!-- 使用完全自定义的格式化函数 -->
    <CommentItem :comment="comment" :custom-format-time="customTimeFormatter" />
  </div>
</template>

<script setup lang="ts">
import { CommentItem } from '@/components/common/comment'
import { TIME_FORMATTERS } from '@/components/common/comment/types/comment-item.types'

// 示例评论数据
const comment = {
  id: '1',
  content: '这是一个示例评论',
  author: {
    id: '1',
    name: '张三',
    avatar: 'https://example.com/avatar.jpg',
  },
  createdAt: '2024-01-15T10:30:00Z',
  likes: 5,
  isLiked: false,
  replyCount: 2,
}

// 完全自定义的时间格式化函数
const customTimeFormatter = (dateString: string): string => {
  const date = new Date(dateString)
  const now = new Date()
  const diff = now.getTime() - date.getTime()

  const seconds = Math.floor(diff / 1000)
  const minutes = Math.floor(seconds / 60)
  const hours = Math.floor(minutes / 60)
  const days = Math.floor(hours / 24)

  if (seconds < 60) return `${seconds}秒前`
  if (minutes < 60) return `${minutes}分钟前`
  if (hours < 24) return `${hours}小时前`
  if (days < 30) return `${days}天前`
  if (days < 365) return `${Math.floor(days / 30)}个月前`

  return `${Math.floor(days / 365)}年前`
}
</script>
